<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2024-03-05
 * @FilePath: /element-admin/src/views/FoodCalDinnerMap.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Member-Point-History-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-form :inline="true" :model="query" class="demo-form-inline" label-width="120px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="选择项目活动">
                  <el-select v-model="query.projects" placeholder="计算天数" size="small">
                    <el-option label="请选择项目活动" value=""></el-option>
                    <el-option v-for="item in projects_options" v-bind:key="item.value" :data="item"
                               :label="item.label"
                               :value=item.value></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="计算天数">
                  <el-select v-model="query.days" placeholder="计算天数" size="small">
                    <el-option label="请选择计算天数" value="1"></el-option>
                    <el-option v-for="item in days_options" v-bind:key="item.value" :data="item"
                               :label="item.label"
                               :value=item.value></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="指定餐食批次">
                  <el-select v-model="query.loadIndex" placeholder="计算天数" size="small">
                    <el-option label="指定餐食批次" value=""></el-option>
                    <el-option v-for="item in days_options" v-bind:key="item.value" :data="item"
                               :label="item.label"
                               :value=item.value></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="允许重复菜品">
                  <el-switch
                      v-model="query.sameFoodFlg"
                      active-value="1"
                      inactive-value="0"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="允许"
                      inactive-text="不允许">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item>
                <el-button type="danger" plain @click="handleClrCache" size="big">清除缓存</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="handleMenu" size="small">计算随机餐谱</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="handleExut" size="small">全餐食计算</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" plain @click="handlePrint" size="small">打印云标签</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="success" plain @click="handleExp" size="small">导出餐食数据</el-button>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="测试会员ID">
                <el-input v-model="query.debug_memid"></el-input>
              </el-form-item>
              <el-form-item label="测试餐食">
                <el-select v-model="query.debug_day_idx" placeholder="测试餐食" size="small">
                  <el-option label="测试餐食" value=""></el-option>
                  <el-option v-for="item in days_options" v-bind:key="item.value" :data="item"
                             :label="item.label"
                             :value=item.value></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-form-item>
                  <el-button type="danger" plain @click="handleDebugButExut" size="big">DEBUG</el-button>
                </el-form-item>
              </el-form-item>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-card class="box-card">
            <el-collapse>
              <el-collapse-item title="菜品计算" name="foodCalDinnerTab">
                <FoodCalDinnerTabView ref="FoodCalDinnerTab" drawId="FoodCalDinnerTab"></FoodCalDinnerTabView>
              </el-collapse-item>
              <el-collapse-item title="热量缺口计算" name="foodCalHeatGapTab">
                <FoodCalHeatGapTabView ref="FoodCalHeatGapTab" drawId="FoodCalHeatGapTab"></FoodCalHeatGapTabView>
              </el-collapse-item>
              <el-collapse-item title="食料汇总" name="foodCalDinnerTotTab">
                <FoodCalDinnerTotTabView ref="FoodCalDinnerTotTab"
                                         drawId="FoodCalDinnerTotTab"></FoodCalDinnerTotTabView>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import FoodCalDinnerTabView from '@/views/hcm/FoodCalDinnerTabs/FoodCalDinnerTab.vue';
import FoodCalHeatGapTabView from '@/views/hcm/FoodCalDinnerTabs/FoodCalHeatGapTab.vue';
import FoodCalDinnerTotTabView from '@/views/hcm/FoodCalDinnerTabs/FoodCalDinnerTotTab.vue';
import {
  expClrCache,
  expDebugMemDinner,
  expMemDinnerExcel,
  exutMenuDinner,
  exutPrinter,
  fetchProjectsOpts
} from "@/api/MemberWeight";
import {Loading} from "element-ui";

export default {
  name: "FoodCalDayMapView",
  components: {FoodCalDinnerTabView, FoodCalHeatGapTabView, FoodCalDinnerTotTabView},
  data() {
    return {
      loading_options: {
        text: "Loading...",
        lock: true,
        fullscreen: true
      },
      loadingInstance: null,
      activeName: 'first',
      today_value: new Date(),
      activeNames: ['FoodCalDinnerTabView'],
      query: {
        days: 1,
        projects: "",
        calorGapNum: 300,
        sameFoodFlg: "1",
        loadIndex: null,
        debug_day_idx: null,
        debug_memid: "eba7d7ec20754ccda4cd02346db7",
      },
      days_options: [
        {label: "1", value: 1, key: 1},
        {label: "2", value: 2, key: 2},
        {label: "3", value: 3, key: 3},
        {label: "4", value: 4, key: 4},
        {label: "5", value: 5, key: 5},
        {label: "6", value: 6, key: 6},
        {label: "7", value: 7, key: 7},
      ],
      projects_options: [],
    }
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    init_obj() {
      return {}
    },
    async handleInit(){
      fetchProjectsOpts().then(res => {
        this.projects_options = res.data;
      })
    },
    async handleMenu() {
      exutMenuDinner(this.query).then(res => {
        if (res.code == 200) {
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    async handleExut() {
      this.loadingInstance = Loading.service(this.loading_options);
      await this.$refs.FoodCalDinnerTab.DinnerExut(this.query).then(() => {
        this.$refs.FoodCalHeatGapTab.MemExut(this.query).then(() => {
          this.$refs.FoodCalDinnerTotTab.TotExut().then(() => {
            this.loadingInstance.close();
          })
        });
      });
    },
    async handleDebugButExut() {
      expDebugMemDinner(this.query).then(() => {})
    },
    async handlePrint() {
      exutPrinter(this.query).then(res => {
        if (res.code == 200) {
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    async handleExp() {
      expMemDinnerExcel(this.query).then(res => {
        if (res.code == 200) {
          this.down(res)
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    async handleClrCache() {
      expClrCache(this.query).then(res => {
        if (res.code == 200) {
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    down(res) {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', res.data.url, true)
      xhr.responseType = 'blob'
      xhr.onload = () => {
        if (xhr.status === 200) {
          const blob = xhr.response
          // const fileName = xhr.getResponseHeader('Content-Disposition').split('=')[1]
          const fileName = res.data.file
          if ('download' in document.createElement('a')) {
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = window.URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            window.URL.revokeObjectURL(elink.href)
            document.body.removeChild(elink)
          } else {
            navigator.msSaveBlob(blob, fileName)
          }
        }
      }
      xhr.send()
    },
  },
  created() {
    let options = {
      text: "Loading...",
      lock: true,
      fullscreen: true
    }
    this.loadingInstance = Loading.service(options);
    this.loadingInstance.close();
    this.handleInit();
  },
  mounted() {
  },
}
</script>
<style scoped>
#container > div {
  margin: 5px;
  width: 400px; /*宽度根据实际情况调节，应与上面一致*/
  overflow: auto; /*防止内容溢出导致布局错位*/
}
</style>